@layer base {
  
  body, :host {
    /* Color */
    --neutral-50: #FAFBFA;
--neutral-100: #F4F6F5;
--neutral-200: #E3E7E5;
--neutral-light: #C8CFC9;
--neutral-base: #9BA39D;
--neutral-500: #7A847F;
--neutral-dark: #6B7870;
--neutral-700: #4A554F;
--neutral-800: #2C3832;
--neutral-bg: rgba(107, 120, 112, 0.15);
--neutral-border: rgba(107, 120, 112, 0.3);
--brand-light: #A8E6B8;
--brand-base: #5FB370;
--brand-dark: #3E704C;
--brand-bg: rgba(95, 179, 112, 0.1);
--brand-border: rgba(95, 179, 112, 0.25);
--success-light: #86EFAC;
--success-base: #22C55E;
--success-dark: #15803D;
--success-bg: rgba(34, 197, 94, 0.1);
--success-border: rgba(34, 197, 94, 0.25);
--warning-light: #FCD34D;
--warning-base: #F5A623;
--warning-dark: #B45309;
--warning-bg: rgba(245, 166, 35, 0.1);
--warning-border: rgba(245, 166, 35, 0.25);
--critical-light: #FCA5A5;
--critical-base: #EF4444;
--critical-dark: #991B1B;
--critical-bg: rgba(239, 68, 68, 0.1);
--critical-border: rgba(239, 68, 68, 0.25);
--overlay-a1: #ffffff0d;
--overlay-a2: #ffffff1a;
--overlay-a3: #ffffff26;
--overlay-a4: #ffffff33;
--overlay-a5: #ffffff4d;
--overlay-a6: #ffffff66;
--overlay-a7: #ffffff80;
--overlay-a8: #ffffff99;
--overlay-a9: #ffffffb3;
--overlay-a10: #ffffffcc;
--overlay-a11: #ffffffe6;
--overlay-a12: #fffffff2;
--overlay-inverted-a1: #0000000d;
--overlay-inverted-a2: #0000001a;
--overlay-inverted-a3: #00000026;
--overlay-inverted-a4: #00000033;
--overlay-inverted-a5: #0000004d;
--overlay-inverted-a6: #00000066;
--overlay-inverted-a7: #00000080;
--overlay-inverted-a8: #00000099;
--overlay-inverted-a9: #000000b3;
--overlay-inverted-a10: #000000cc;
--overlay-inverted-a11: #000000e6;
--overlay-inverted-a12: #000000f2;
--info-light: #93C5FD;
--info-base: #3B96F7;
--info-dark: #1E4E8C;
--info-bg: rgba(59, 150, 247, 0.1);
--info-border: rgba(59, 150, 247, 0.25);
--bg-main: #0A1410;
--bg-card: #0F1F18;
--bg-elevated: #152B21;
--bg-hover: #1A3429;
--border-default: rgba(255, 255, 255, 0.15);
--border-strong: rgba(255, 255, 255, 0.25);
    /* Fonts */
    --font-spacegrotesk: 'Space Grotesk',sans-serif;
--font-plusjakartasans: 'Plus Jakarta Sans',sans-serif;

    /* Font size */
    --text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-md: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 3.75rem;
    /* Font weight */
    --normal: 400;
--medium: 500;
--semi: 600;
--bold: 700;
    /* Shadows */
    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.25);
--shadow-base:  0 1px 3px 0 rgba(0, 0, 0, 0.25), 0 1px 2px 0 rgba(0, 0, 0, 0.25);
--shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -1px rgba(0, 0, 0, 0.25);
--shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -2px rgba(0, 0, 0, 0.25);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.25);
--shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* Border radius */
    
    /* Spacing */
    --rounding-none: 0px;
--rounding-sm: 2px;
--rounding-md: 4px;
--rounding-lg: 8px;
--rounding-full: 9999px;
--border-none: 0px;
--border-md: 1px;
--border-lg: 2px;
--line-height-xs: 1.125rem;
--line-height-sm: 1.25rem;
--line-height-md: 1.5rem;
--line-height-lg: 1.75rem;
--line-height-xl: 1.875rem;
--line-height-2xl: 2rem;
--line-height-3xl: 2.375rem;
--line-height-4xl: 2.75rem;
--line-height-5xl: 3.75rem;
--line-height-6xl: 4.5rem;
--letter-spacing-xs: 0rem;
--letter-spacing-sm: 0rem;
--letter-spacing-md: 0rem;
--letter-spacing-lg: 0rem;
--letter-spacing-xl: 0rem;
--letter-spacing-2xl: 0rem;
--letter-spacing-3xl: 0rem;
--letter-spacing-4xl: -0.045rem;
--letter-spacing-5xl: -0.0575rem;
--letter-spacing-6xl: -0.075rem;
--interactive-height-sm: 2rem;
--interactive-height-md: 2.5rem;
--interactive-height-lg: 3rem;
--toggle-height-md: 1.5rem;
--spinner-size-sm: 1.25rem;
--spinner-size-md: 1.5rem;
--spinner-size-lg: 1.75rem;
--side-menu-width: 300px;
--header-height: 6rem;
--avatar-size-sm: 1.5rem;
--avatar-size-md: 2rem;
--avatar-size-lg: 3rem;
--badge-size-sm: 1.5rem;
--badge-size-md: 2rem;
--badge-size-lg: 2.5rem;
    /* Z-index */
    
  }
  @keyframes animation-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes animation-fade-in {
    from {
      opacity:0;
    }
    to {
      opacity:1;
    }
  }
  @keyframes animation-fade-out {
    from {
      opacity:1;
    }
    to {
      opacity:0;
    }
  }
}


    .eUeBWX {
      height:100vh;
      display:flex;
      background:var(--bg-main);
      flex-direction:row;
    }

    .bUtwNs {
      display:flex;
      row-gap:0.3rem;
      column-gap:0.3rem;
      align-items:center;
      flex-direction:row;
      justify-content:space-between;
    }

    .cGvGjk {
      width:300px;
      height:100vh;
      row-gap:1.5rem;
      animation:1s ease 0ms 1 normal none running animation-diMMIZ;
      max-width:300px;
      min-width:150px;
      background:var(--bg-main);
      box-shadow:-2px 0 4px  rgba(0, 0, 0, 0.05);
      column-gap:1.5rem;
      overflow-y:auto;
      border-left:1px solid #e9ecef;
      padding-top:0rem;
      padding-left:1rem;
      padding-right:1rem;
      padding-bottom:0rem;
    }

    @keyframes animation-diMMIZ {
        0% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
    }

    .pezAr {
      color:#F4F6F5;
      font-size:var(--font-size-lg);
      font-weight:var(--font-weight-bold);
    }

    .eTrSk {
      color:#E3E7E5;
      width:100%;
      height:2.2rem;
      font-size:0.8rem;
      background:#0F1F18;
      box-sizing:border-box;
      font-family:"Plus Jakarta Sans";
      font-weight:600;
      padding-top:0.5rem;
      border-color:#5FB370;
      border-style:solid;
      border-width:1px;
      padding-left:0.5rem;
      padding-right:0.5rem;
      padding-bottom:0.5rem;
      border-top-left-radius:4px;
      border-top-right-radius:4px;
      border-bottom-left-radius:4px;
      border-bottom-right-radius:4px;
    }

    .dnNean {
      color:#F4F6F5;
      font-size:1.1rem;
      font-family:"Space Grotesk";
      font-weight:500;
      letter-spacing:0.5px;
    }

    .dyaOva {
      color:#9BA39D;
      font-size:0.75rem;
      font-family:"Plus Jakarta Sans";
    }

    .brUntk {
      display:flex;
      row-gap:0.25rem;
      column-gap:0.25rem;
      align-items:center;
      flex-direction:row;
      justify-content:center;
    }

    .ApLEJ {
      width:100%;
      height:100%;
      align-items:center;
      justify-content:center;
    }

    .bDaNtE {
      flex:1;
      display:flex;
      overflow:hidden;
      flex-direction:column;
    }

    .cCmqiI {
      color:#0F1F18;
    }

    .cOdMti {
      flex:1;
      border:1px solid #ddd;
      cursor:pointer;
      display:flex;
      padding:0.5rem 0.75rem;
      row-gap:0.5rem;
      font-size:0.8rem;
      max-width:150px;
      background:white;
      column-gap:0.5rem;
      transition:all 0.2s;
      align-items:center;
      font-family:"Plus Jakarta Sans";
      font-weight:500;
      border-radius:4px;
      flex-direction:row;
      justify-content:center;
    }

    .cOdMti:hover {
      cursor:pointer;
      border-color:#477853;
      border-style:solid;
      border-width:1px;
    }

    .XhvfD {
      color:var(--neutral-base);
      font-family:Plus Jakarta Sans;
      line-height:1.5;
    }

    .bZBmTp {
      flex:1;
      border:1px solid #ddd;
      cursor:pointer;
      display:flex;
      padding:0.5rem 0.75rem;
      row-gap:0.5rem;
      animation:0.4s ease 0ms 1 normal none running animation-diMMIZ;
      font-size:0.8rem;
      max-width:150px;
      background:white;
      column-gap:0.5rem;
      transition:all 0.2s;
      align-items:center;
      font-family:"Plus Jakarta Sans";
      font-weight:500;
      border-radius:4px;
      flex-direction:row;
      justify-content:center;
    }

    .bZBmTp:hover {
      cursor:pointer;
      border-color:#477853;
      border-style:solid;
      border-width:1px;
    }

    .cQvMiE {
      flex:1;
      display:flex;
      position:relative;
      align-items:center;
      justify-content:center;
    }

    .cTwFCO {
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      display:flex;
      z-index:2000;
      position:absolute;
      background:#152b21b3;
      align-items:center;
      justify-content:center;
    }

    .btHRiZ {
      width:100%;
      padding:1rem;
      row-gap:1rem;
      animation:1s ease 0ms 1 normal none running animation-diMMIZ;
      background:#0F1F18;
      box-shadow:0 2px 4px rgba(0,0,0,0.05);
      column-gap:1rem;
      border-top-left-radius:8px;
      border-top-right-radius:8px;
      border-bottom-left-radius:8px;
      border-bottom-right-radius:8px;
    }

    .CcHCV {
      height:5rem;
      display:flex;
      padding:0.75rem;
      row-gap:0.5rem;
      background:#152B21;
      column-gap:0.5rem;
      align-items:center;
      font-family:Plus Jakarta Sans;
      border-radius:4px;
      flex-direction:column;
      justify-content:center;
      border-left-color:#3B96F7;
      border-left-style:solid;
      border-left-width:4px;
    }

    .CcHCV:hover {
      cursor:pointer;
      display:flex;
      padding:0.75rem;
      background:#152b21cc;
      align-items:center;
      font-family:Plus Jakarta Sans;
      border-radius:4px;
      flex-direction:column;
      justify-content:center;
      border-left-color:#F2A626;
      border-left-style:solid;
      border-left-width:4px;
    }

    @keyframes animation-dWwYkB {
        10% {
          scale: 1.05 1.05 0;
        }

        100% {
          scale: 1 1;
        }
    }

    .ePiGBn {
      height:5rem;
      display:flex;
      padding:0.75rem;
      row-gap:0.5rem;
      background:#152B21;
      column-gap:0.5rem;
      align-items:center;
      font-family:Plus Jakarta Sans;
      border-radius:4px;
      flex-direction:column;
      justify-content:center;
      border-left-color:#3B96F7;
      border-left-style:solid;
      border-left-width:4px;
    }

    .ePiGBn:hover {
      cursor:pointer;
      display:flex;
      padding:0.75rem;
      background:#152b21cc;
      align-items:center;
      font-family:Plus Jakarta Sans;
      border-color:black;
      border-style:solid;
      border-width:1px;
      border-radius:4px;
      flex-direction:column;
      justify-content:center;
      border-left-color:#F2A626;
      border-left-style:solid;
      border-left-width:4px;
    }

    .ckrmCa {
      flex:1;
      border:1px solid #ddd;
      cursor:pointer;
      display:flex;
      padding:0.5rem 0.75rem;
      row-gap:0.5rem;
      font-size:0.8rem;
      max-width:150px;
      min-width:120px;
      background:white;
      column-gap:0.5rem;
      transition:all 0.2s;
      align-items:center;
      font-family:"Plus Jakarta Sans";
      font-weight:500;
      border-radius:4px;
      flex-direction:row;
      justify-content:center;
    }

    .ckrmCa:hover {
      cursor:pointer;
      border-color:#477853;
      border-style:solid;
      border-width:1px;
    }

    .ckrmCa.isRotating {
      flex:1;
      cursor:pointer;
      display:flex;
      padding:0.5rem 0.75rem;
      row-gap:0.5rem;
      font-size:0.8rem;
      max-width:150px;
      background:white;
      box-shadow:0px 2px 4px 0px #00000020;
      column-gap:0.5rem;
      transition:all 0.2s;
      align-items:center;
      border-color:#F5A623;
      border-style:Solid;
      border-width:3px;
      border-radius:4px;
      flex-direction:row;
      justify-content:center;
    }

    .fFCtsV {
      width:100%;
      display:flex;
      row-gap:1rem;
      column-gap:1rem;
      align-items:center;
      flex-direction:column;
    }

    .eicmPb {
      width:60%;
      bottom:0px;
      height:125px;
      display:flex;
      row-gap:0.5rem;
      z-index:1000;
      position:fixed;
      animation:1s ease 0ms 1 normal none running animation-diMMIZ;
      background:#152b21bf;
      box-shadow:0 2px 4px rgba(0,0,0,0.05);
      column-gap:0.5rem;
      align-items:center;
      padding-top:0.8rem;
      border-color:#1a3829;
      border-style:solid;
      border-width:1px;
      padding-left:0.8rem;
      border-radius:8px;
      margin-bottom:1.5rem;
      padding-right:0.8rem;
      flex-direction:column;
      padding-bottom:0.8rem;
      pointer-events:auto;
      justify-content:space-around;
    }

    .bOMCNT {
      color:#F4F6F5;
    }

    .ekUAjv {
      display:flex;
      row-gap:0.5rem;
      animation:1s ease 0ms 1 normal none running animation-bCLlVc;
      background:#F5A623;
      column-gap:0.5rem;
      align-items:center;
      padding-top:0.5rem;
      padding-left:1rem;
      padding-right:1rem;
      flex-direction:row;
      padding-bottom:0.5rem;
      justify-content:center;
      border-top-left-radius:8px;
      border-top-right-radius:8px;
      border-bottom-left-radius:8px;
      border-bottom-right-radius:8px;
    }

    @keyframes animation-bCLlVc {
        0% {
          translate: 0 0;
        }

        30% {
          translate: 0 -16px;
        }

        60% {
          translate: 0 0;
        }

        80% {
          translate: 0 -8px;
        }

        100% {
          translate: 0 0;
        }
    }

    .fvuEHL {
      color:var(--neutral-100);
      width:100%;
      font-size:var(--font-size);
      margin-top:var(--margin-top);
      font-family:Space Grotesk;
      font-weight:var(--bold);
      line-height:var(--line-height);
      white-space:normal;
      margin-bottom:var(--margin-bottom);
      letter-spacing:var(--letter-spacing);
    }

    .fvuEHL.truncated {
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }

    .fvuEHL.clamped {
      display:-webkit-box;
      overflow:hidden;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:var(--clamp-lines);
    }

    .deIfLS {
      color:#F4F6F5;
      font-size:1.6rem;
      font-family:"Space Grotesk";
      font-weight:800;
    }

    .eKyyxZ {
      color:#0F1F18;
      font-size:0.8rem;
      font-family:Plus Jakarta Sans;
      font-weight:500;
    }

    .bvIwcU {
      display:flex;
      row-gap:0.5rem;
      column-gap:0.5rem;
      align-items:center;
      flex-direction:row;
      justify-content:center;
    }

    .czMmOl {
      color:#F4F6F5;
      font-size:0.8rem;
      margin-top:0px;
      font-family:Plus Jakarta Sans;
      font-weight:500;
      margin-left:0px;
      margin-right:0px;
      margin-bottom:0rem;
    }

    .cjoBAf {
      color:white;
      width:100%;
      height:22px;
      display:flex;
      background:linear-gradient(90deg, #5fb370 0%, #3b96f7 50%, #f5a623 100%);;
      box-shadow:0 2px 4px rgba(0,0,0,0.1);
      text-align:center;
      align-items:center;
      border-color:#477853;
      justify-content:center;
    }

    .ckmrbK {
      width:80%;
      display:flex;
      row-gap:1rem;
      flex-wrap:wrap;
      column-gap:1rem;
      align-items:center;
      padding-top:1rem;
      padding-left:1rem;
      padding-right:1rem;
      flex-direction:row;
      padding-bottom:1rem;
      justify-content:center;
    }

    .ecWfkC {
      width:100%;
      display:flex;
      row-gap:1rem;
      background:var(--bg-card);
      box-shadow:0 2px 4px  #152b211a;
      column-gap:1rem;
      align-items:center;
      padding-top:1rem;
      padding-left:0.5rem;
      border-radius:8px;
      padding-right:0.5rem;
      flex-direction:column;
      padding-bottom:1rem;
      justify-content:center;
    }

    .fgZonC {
      flex:1;
      border:1px solid #ddd;
      cursor:pointer;
      display:flex;
      padding:0.5rem 0.75rem;
      row-gap:0.5rem;
      font-size:0.8rem;
      max-width:150px;
      background:white;
      column-gap:0.5rem;
      transition:all 0.2s;
      align-items:center;
      font-family:"Plus Jakarta Sans";
      font-weight:500;
      border-radius:4px;
      flex-direction:row;
      justify-content:center;
    }

    .fgZonC:hover {
      cursor:pointer;
      border-color:#477853;
      border-style:solid;
      border-width:1px;
    }

    .fgZonC.isDrawing {
      flex:1;
      cursor:pointer;
      display:flex;
      padding:0.5rem 0.75rem;
      row-gap:0.5rem;
      font-size:0.8rem;
      max-width:150px;
      background:white;
      box-shadow:0px 2px 4px 0px #00000020;
      column-gap:0.5rem;
      transition:all 0.2s;
      align-items:center;
      border-color:#F5A623;
      border-style:Solid;
      border-width:3px;
      border-radius:4px;
      flex-direction:row;
      justify-content:center;
    }

    .dEtHQG {
      flex:1;
      color:#F4F6F5;
      cursor:pointer;
      display:flex;
      padding:0.5rem 0.75rem;
      row-gap:0.5rem;
      font-size:0.8rem;
      background:var(--brand-base);
      box-sizing:border-box;
      column-gap:0.5rem;
      transition:all 0.4s;
      align-items:center;
      font-family:"Plus Jakarta Sans";
      font-weight:600;
      border-style:None;
      border-width:1px;
      border-radius:4px;
      flex-direction:row;
      justify-content:center;
    }

    .dEtHQG:hover {
      background:#3d6b4a;
    }

    .dhpxQi {
      color:#F4F6F5;
      font-size:1.1rem;
      margin-top:0px;
      font-family:"Space Grotesk";
      font-weight:500;
      margin-left:0px;
      margin-right:0px;
      margin-bottom:0rem;
      letter-spacing:0.5px;
    }

    .crTORw {
      padding:2rem;
      row-gap:1.5rem;
      animation:1s ease 0ms 1 normal none running animation-diMMIZ;
      max-width:450px;
      background:var(--bg-elevated);
      box-shadow:0 10px 25px rgba(0, 0, 0, 0.3);
      column-gap:1.5rem;
      text-align:center;
      border-color:var(--brand-border);
      border-style:Solid;
      border-width:1px;
      border-radius:12px;
    }

    .VWAUf {
      color:#F4F6F5;
      border:none;
      cursor:pointer;
      padding:0.75rem 1.5rem;
      font-size:1rem;
      background:var(--brand-base);
      transition:background 0.2s;
      font-family:Plus Jakarta Sans;
      font-weight:500;
      border-radius:6px;
    }

    .VWAUf:hover {
      background:var(--brand-dark);
    }

    .eQPQVT {
      height:var(--header-height);
      row-gap:0.4rem;
      column-gap:0.4rem;
      align-items:center;
      padding-left:0.3rem;
      padding-right:0.3rem;
      flex-direction:row;
      justify-content:flex-start;
    }

    .cvnKAc {
      color:#ffffff;
    }

    .cKFxs {
      display:flex;
      row-gap:0.1rem;
      font-size:1.4rem;
      column-gap:0.1rem;
      align-items:flex-start;
      padding-top:4px;
      flex-direction:row;
      padding-bottom:4px;
      justify-content:flex-start;
    }

    .ekdprl {
      color:#E3E7E5;
      font-family:"Space Grotesk";
      font-weight:750;
    }